<template>
  <el-card class="box-card">

    <el-form ref="form" :model="form" label-width="80px" :inline="true" >
      <div class="locationstyle">
        <div>说明：目前支持学科和关键字条件筛选</div>
        <div>
            <el-form-item>
              <el-button type="success" icon="el-icon-edit"  @click="newincreaseuser" >新增用户</el-button>
            </el-form-item>
        </div>
      </div>

        <el-form-item label="学科">
          <el-select v-model="form.subject" placeholder="请选择" @change="subjectSelect">
            <el-option
              v-for="(item, i) in  SubjectsSimpleList"
              :key="i"
              :label="item.label"
              :value="item.value"
              />
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-select v-model="form.secondLevel" placeholder="请选择" @change="secondchange">
             <el-option
              v-for="(item, i) in  SecondLevelList"
              :key="i"
              :label="item.label"
              :value="item.value"
              />
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="form.threeLable" placeholder="请选择" @change="lablechange">
              <el-option
              v-for="(item, i) in  TagsSimpleList"
              :key="i"
              :label="item.label"
              :value="item.value"
              />
          </el-select>
        </el-form-item>
          <el-form-item label="关键字">
          <el-input v-model="form.keywords" placeholder="根据提干搜索"></el-input>
        </el-form-item>
          <el-form-item label="试题类型">
          <el-select v-model="form.texttype" placeholder="请选择">
            <el-option label="单选" value="单选"></el-option>
            <el-option label="多选" value="多选"></el-option>
            <el-option label="简答" value="简答"></el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="难度">
          <el-select v-model="form.difficulty" placeholder="请选择">
            <el-option label="简单" value="简单"></el-option>
            <el-option label="一般" value="一般"></el-option>
            <el-option label="困难" value="困难"></el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="方向">
          <el-select v-model="form.direction" placeholder="请选择">
            <el-option label="o2o" value="1"></el-option>
            <el-option label="外包服务" value="0"></el-option>
            <el-option label="企业服务" value="0"></el-option>
            <el-option label="互联网金融" value="0"></el-option>
            <el-option label="企业咨询" value="0"></el-option>
            <el-option label="互联网" value="0"></el-option>
            <el-option label="电子商务" value="0"></el-option>
            <el-option label="其他" value="0"></el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="录入人">
          <el-select v-model="form.entrypeople" placeholder="请选择">
              <el-option
              v-for="(item, i) in  usersSimpleList"
              :key="i"
              :label="item.username"
              :value="item.username"
              />
          </el-select>
        </el-form-item>
            <el-form-item label="题目备注">
              <el-input v-model="form.remark"></el-input>
            </el-form-item>
            <el-form-item label="企业简称">
              <el-input v-model="form.intro"></el-input>
            </el-form-item>
          <el-form-item label="城市">
          <el-select v-model="form.province" placeholder="请选择">
            <el-option label="天津市" value="天津市"></el-option>
            <el-option label="重庆市" value="重庆市"></el-option>
          </el-select>
          <el-select v-model="form.city" placeholder="请选择">
            <el-option label="和平区" value="和平区"></el-option>
            <el-option label="南岸区" value="南岸区"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="resetForm">清除</el-button>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>

    </el-form>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">
        <!-- 全部 -->
          <!-- <- 共多少记录 todo -->
          <el-alert
            type="info"
            :closable="false"
            class="infostyle"
            >
            数据一共{{ ChoiceList.counts}}条
          </el-alert>

          <!-- 列表  todo-->
          <my-table
          class="mytablestyle"
          :table-props="{
            data: ChoiceList.items,
            border: false,
          }"
          :columns="[
            { label: '试题编号', prop: 'number', width: 80, align: 'center' },
            { label: '学科', prop: 'subject', width: 180, align: 'center' },
            { label: '目录', prop: 'catalog', width: 180, align: 'center' },
            { label: '题型', prop: 'questionType', width: 180, align: 'center' },
            { label: '题干', prop: 'question' , width: 180, align: 'center',  },//换v-html格式todo
            { label: '录入时间', prop: 'addDate', width: 180, align: 'center' },
            { label: '难度', prop: 'difficulty', width: 180, align: 'center' },
            { label: '录入人', prop: 'creator', width: 180, align: 'center',sortable: true, },
            { label: '审核状态', prop: 'chkState', width: 180, align: 'center' },  //处理数据
            { label: '审核意见', prop: 'chkRemarks', width: 180, align: 'center' },
            { label: '审核人', prop: 'chkUser', width: 180, align: 'center' },
            { label: '发布状态', prop: 'publishState', width: 180, align: 'center' },
            { label: '操作', slotName: 'operate', align: 'center', width:260, fixed: 'right' },  // 带插槽slotName
          ]"
          :pagination-props="{
            layout: ' prev, pager, next, sizes, jumper, total',
            total: ChoiceList.counts,
            background: true
          }"
          :pagination-events="events"
        >
          <!-- <template #question>
                <div v-html="basicsTestList.items[0].question" ></div> todo
          </template> -->
          <template   v-slot:operate="scope">
            <el-row>
              <el-button type="text" @click="lookover(scope.row)">预览</el-button>
              <el-button type="text"  @click="checkBT(scope.row)">审核</el-button>
              <el-button type="text" @click="changeBT(scope.row)">修改</el-button>
              <el-button type="text" @click="putSoldBT(scope.row)">{{ChoiceList.items.publishState ?  '下架':'上架'}}</el-button>
              <el-button type="text" @click="deleteBT(scope.row)">删除</el-button>

            </el-row>
          </template>
        </my-table>
          <!-- 全部 -->
      </el-tab-pane>
      <el-tab-pane label="待审核" name="second" >
        <!-- 待审核 -->
        <!-- <- 共多少记录 todo -->
          <el-alert
            type="info"
            :closable="false"
            class="infostyle"
            >
            数据一共{{ ChoiceList.counts}}条
          </el-alert>

          <!-- 列表  todo-->
          <my-table
          class="mytablestyle"
          :table-props="{
            data: ChoiceList.items,
            border: false,
          }"
          :columns="[
            { label: '试题编号', prop: 'number', width: 80, align: 'center' },
            { label: '学科', prop: 'subject', width: 180, align: 'center' },
            { label: '目录', prop: 'catalog', width: 180, align: 'center' },
            { label: '题型', prop: 'questionType', width: 180, align: 'center' },
            { label: '题干', prop: 'question' , width: 180, align: 'center',  },//换v-html格式todo
            { label: '录入时间', prop: 'addDate', width: 180, align: 'center' },
            { label: '难度', prop: 'difficulty', width: 180, align: 'center' },
            { label: '录入人', prop: 'creator', width: 180, align: 'center',sortable: true, },
            { label: '审核状态', prop: 'chkState', width: 180, align: 'center' },  //处理数据
            { label: '审核意见', prop: 'chkRemarks', width: 180, align: 'center' },
            { label: '审核人', prop: 'chkUser', width: 180, align: 'center' },
            { label: '发布状态', prop: 'publishState', width: 180, align: 'center' },
            { label: '操作', slotName: 'operate', align: 'center', width:260, fixed: 'right' },  // 带插槽slotName
          ]"
          :pagination-props="{
            layout: ' prev, pager, next, sizes, jumper, total',
            total: ChoiceList.counts,
            background: true
          }"
          :pagination-events="events"
        >
          <!-- <template #question>
                <div v-html="basicsTestList.items[0].question" ></div> todo
          </template> -->
          <template   v-slot:operate="scope">
            <el-row>
              <el-button type="text" @click="lookover(scope.row)">预览</el-button>
              <el-button type="text" @click="checkBT(scope.row)">审核</el-button>
              <el-button type="text" @click="changeBT(scope.row)">修改</el-button>
              <el-button type="text" @click="putSoldBT(scope.row)">{{ChoiceList.items.publishState ?  '下架':'上架'}}</el-button>
              <el-button type="text" @click="deleteBT(scope.row)">删除</el-button>
            </el-row>
          </template>
        </my-table>
           <!-- 待审核 -->

      </el-tab-pane>
      <el-tab-pane label="已审核" name="third">
        <!-- 已审核 -->
           <!-- <- 共多少记录 todo -->
          <el-alert
            type="info"
            :closable="false"
            class="infostyle"
            >
            数据一共{{ ChoiceList.counts}}条
          </el-alert>

          <!-- 列表  todo-->
          <my-table
          class="mytablestyle"
          :table-props="{
            data: ChoiceList.items,
            border: false,
          }"
          :columns="[
            { label: '试题编号', prop: 'number', width: 80, align: 'center' },
            { label: '学科', prop: 'subject', width: 180, align: 'center' },
            { label: '目录', prop: 'catalog', width: 180, align: 'center' },
            { label: '题型', prop: 'questionType', width: 180, align: 'center' },
            { label: '题干', prop: 'question' , width: 180, align: 'center',  },//换v-html格式todo
            { label: '录入时间', prop: 'addDate', width: 180, align: 'center' },
            { label: '难度', prop: 'difficulty', width: 180, align: 'center' },
            { label: '录入人', prop: 'creator', width: 180, align: 'center',sortable: true, },
            { label: '审核状态', prop: 'chkState', width: 180, align: 'center' },  //处理数据
            { label: '审核意见', prop: 'chkRemarks', width: 180, align: 'center' },
            { label: '审核人', prop: 'chkUser', width: 180, align: 'center' },
            { label: '发布状态', prop: 'publishState', width: 180, align: 'center' },
            { label: '操作', slotName: 'operate', align: 'center', width:260, fixed: 'right' },  // 带插槽slotName
          ]"
          :pagination-props="{
            layout: ' prev, pager, next, sizes, jumper, total',
            total: ChoiceList.counts,
            background: true
          }"
          :pagination-events="events"
        >
          <!-- <template #question>
                <div v-html="basicsTestList.items[0].question" ></div> todo
          </template> -->
          <template   v-slot:operate="scope">
            <el-row>
              <el-button type="text" @click="lookover(scope.row)">预览</el-button>
              <el-button type="text" @click="checkBT(scope.row)">审核</el-button>
              <el-button type="text" @click="changeBT(scope.row)">修改</el-button>
              <el-button type="text" @click="putSoldBT(scope.row)">{{ChoiceList.items.publishState ?  '下架':'上架'}}</el-button>
              <el-button type="text" @click="deleteBT(scope.row)">删除</el-button>
            </el-row>
          </template>
        </my-table>
        <!-- 已审核 -->
        </el-tab-pane>
      <el-tab-pane label="已拒绝" name="fourth">
        <!-- 已拒绝 -->
           <!-- <- 共多少记录 todo -->
          <el-alert
            type="info"
            :closable="false"
            class="infostyle"
            >
            数据一共{{ ChoiceList.counts}}条
          </el-alert>

          <!-- 列表  todo-->
          <my-table
          class="mytablestyle"
          :table-props="{
            data: ChoiceList.items,
            border: false,
          }"
          :columns="[
            { label: '试题编号', prop: 'number', width: 80, align: 'center' },
            { label: '学科', prop: 'subject', width: 180, align: 'center' },
            { label: '目录', prop: 'catalog', width: 180, align: 'center' },
            { label: '题型', prop: 'questionType', width: 180, align: 'center' },
            { label: '题干', prop: 'question' , width: 180, align: 'center',  },//换v-html格式todo
            { label: '录入时间', prop: 'addDate', width: 180, align: 'center' },
            { label: '难度', prop: 'difficulty', width: 180, align: 'center' },
            { label: '录入人', prop: 'creator', width: 180, align: 'center',sortable: true, },
            { label: '审核状态', prop: 'chkState', width: 180, align: 'center' },  //处理数据
            { label: '审核意见', prop: 'chkRemarks', width: 180, align: 'center' },
            { label: '审核人', prop: 'chkUser', width: 180, align: 'center' },
            { label: '发布状态', prop: 'publishState', width: 180, align: 'center' },
            { label: '操作', slotName: 'operate', align: 'center', width:260, fixed: 'right' },  // 带插槽slotName
          ]"
          :pagination-props="{
            layout: ' prev, pager, next, sizes, jumper, total',
            total: ChoiceList.counts,
            background: true
          }"
          :pagination-events="events"
        >
          <!-- <template #question>
                <div v-html="basicsTestList.items[0].question" ></div> todo
          </template> -->
          <template   v-slot:operate="scope">
            <el-row>
              <el-button type="text" @click="lookover(scope.row)">预览</el-button>
              <el-button type="text" @click="checkBT(scope.row)">审核</el-button>
              <el-button type="text" @click="changeBT(scope.row)">修改</el-button>
              <el-button type="text" @click="putSoldBT(scope.row)">{{ChoiceList.items.publishState ?  '下架':'上架'}}</el-button>
              <el-button type="text" @click="deleteBT(scope.row)">删除</el-button>
            </el-row>
          </template>
        </my-table>
        <!-- 已拒绝 -->
        </el-tab-pane>
        <!-- 标签公共部分 -->
          <!-- 题目预览 -->
        <el-dialog title="题目预览" :visible.sync="preview">
          <div class="previewtitle">
            <!-- <div class="previewtitlebar">【题型】{{LookOverList.questionType ? '单选' : '多选'}}</div> -->
            <div class="previewtitlebar">【题型】{{LookOverList.questionType}}</div>
            <div class="previewtitlebar">【编号】{{LookOverList.id}}</div>
            <div class="previewtitlebar">【难度】{{LookOverList.difficulty}}</div>
            <div class="previewtitlebar">【标签】{{LookOverList.tags}}</div>
            <div class="previewtitlebar">【学科】{{LookOverList.subjectName}}</div>
            <div class="previewtitlebar">【目录】{{LookOverList.directoryName}}</div>
            <div class="previewtitlebar">【方向】{{LookOverList.direction}}</div>
          </div>
          <!-- 提干 -->
          <div class="laststyltetitle">
            【提干】:
            <div v-html="LookOverList.question" style="color:blue"></div>
            <div>{{LookOverList.questionType}} 选项：（以下选中的选项为正确答案）</div>
                <!-- 单选 todo -->
              <el-radio-group v-if="LookOverList.questionType==1" v-model="checkList">
                <el-radio :label="item.title" v-for="(item,i) in LookOverList.options" :key="i" class="checkboxstyle"></el-radio>
              </el-radio-group>
                <!-- 多选 todo-->
              <el-checkbox-group  v-else v-model="checkList">
                <el-checkbox :label="item.title" v-for="(item,i) in LookOverList.options" :key="i" class="checkboxstyle"></el-checkbox>
              </el-checkbox-group>


          </div>
          <div class="laststylte">
            【参考答案】：
            <span slot="footer" class="dialog-footer">
              <el-button type="danger" @click="videovision">视频答案预览</el-button>
            </span>
          </div>
          <div class="laststylte" v-html="'【答案解析】:'+ LookOverList.answer" >
          </div>
          <div class="laststylte">
          【题目备注】：{{LookOverList.remarks ? LookOverList.remarks :'无'}}
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="previewClose">关闭</el-button>
          </div>
        </el-dialog>

        <!-- 删除基础题库 -->
        <el-dialog title="删除" :visible.sync="deleteBasicTest">
            <div class="el-icon-warning" icon="success">此操作将永久删除该题目, 是否继续?</div>
          <div slot="footer" class="dialog-footer">
            <el-button  @click="deleteBasicTestClose">取消</el-button>
            <el-button type="primary" @click="deleteBasicTestOk">确定</el-button>
          </div>
        </el-dialog>

          <!-- 上下架 -->
        <el-dialog title="上下架选择" :visible.sync="putSoldTest">
            <div class="el-icon-warning" icon="success">您确认上架这道题目吗?</div>
          <div slot="footer" class="dialog-footer">
            <el-button  @click="putSoldTestClose">取消</el-button>
            <el-button type="primary" @click="putSoldTestOk">确定</el-button>
          </div>
        </el-dialog>
          <!-- 审核弹窗 -->
        <el-dialog title="审核" :visible.sync="checkTest">
            <!-- <div class="el-icon-warning" icon="success">您确认上架这道题目吗?</div> -->
            <el-radio v-model="radiobox" label="1">通过</el-radio>
            <el-radio v-model="radiobox" label="2">拒绝</el-radio>
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入审核意见"
              v-model="textarea"
              class="textareastyle"
              >
            </el-input>
            <div slot="footer" class="dialog-footer">
              <el-button  @click="checkTestClose">取消</el-button>
              <el-button type="primary" @click="checkTestOk">确定</el-button>
            </div>
        </el-dialog>
        <!-- 标签公共部分 -->
    </el-tabs>



  </el-card>

</template>

<script>
import { mapState, mapActions} from "vuex";
import * as testmanagementApi from '@/api/testmanagement';
// putSold 上下架

// 获取id
let subjectId = null
//删除基础题库获取id
let deleteBasicId = null
// 加入精选题库取id
let selectionId = null
// 上下架获取id
let putSoldID = null
// 获取审核id
let checkId =null

export default {
  data() {
    return {
      // 这是设置切换标签默认项
      activeName: 'first',
      page: 1,
      pagesize: 10,
      // 题目预览弹窗开关
      preview:false,
      // 删除基础题库弹窗
      deleteBasicTest:false,
      // 加入精选题库弹窗
      selectionTest:false,
      // 上下架弹窗
      putSoldTest:false,
      // 审核弹窗
      checkTest:false,
      // 搜索页的配置
      form: {
        subject: null,
        secondLevel: null,
        threeLable: null,
        keywords: null,
        texttype: null,
        difficulty: null,
        direction: null,
        entrypeople: null,
        remark: null,
        intro: null,
        province:null,
        city: null,
      },
      // 点击翻页监听事件
      events: {
        "current-change": this.handleCurrentChange,
        "size-change": this.pagesizeChange,
      },
      // 显示选项盒子
      checkList:[],
      // 审核选项盒子
      radiobox: 0 ,
      // 审核意见
      textarea: '',

    };
  },
  computed:{
    ...mapState("testmanagement",[
        // 获取基础题库列表
      // "basicsTestList",
      // 学科下拉菜单
      "SubjectsSimpleList",
      // 用户简单列表（目前是用在录入人列表）
      "usersSimpleList",
      // 学科二级目录（新添加)
      "SecondLevelList",
      // 获取搜索页标签选项数据)
      "TagsSimpleList",
      // 基础题库详情 题目预览
      "LookOverList",
      //   精选题库列表
      "ChoiceList",
    ]),
  },
  methods: {
    ...mapActions("testmanagement",[
        // 更新基础题库列表
      // "updatebasicsTestList",
        // 学科下拉菜单
      "updateSubjectsSimpleList",
        // 用户简单列表（目前是用在录入人列表）
      "updateUsersSimpleList",
        // 学科二级目录（新添加
      "updateSecondLevelList",
        // 获取搜索页标签选项数据
      "updateTagsSimpleList",
        // 基础题库详情 题目预览
      "updateLookOverList",
        // 精选题库列表    todo等明天渲染
      "updateChoiceList",

    ]),
      // 更新页数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // 更新页数列表
      this.updateChoiceList({
        page: (this.page = val),
        pagesize: this.pagesize,
      });
    },
    // 更新每页展示数量
    pagesizeChange(val) {
      console.log(`当前页: ${val}`);
      // 更新页数列表
      this.updateChoiceList({
        page: this.page,
        pagesize: (this.pagesize = val),
      });
    },
    // 新增用户
    newincreaseuser(){
      // 跳路由
      this.$router.push('new')

    },
    // 搜索清除按钮
    resetForm(){
      this.form = {}
    },
    // 点击搜素按钮
    onSubmit(){
      // 通过id等数据获取返回值
      this.updateChoiceList({
        subjectID: subjectId,
        page:this.page,
        pagesize: this.pagesize,
        ...this.form

      })
    },
    // 学科选择监听事件
    subjectSelect(data){
      console.log(data);
      // 学科二级目录（新添加
      this.updateSecondLevelList({
        subjectID: data
      })
      // 获取搜索页标签选项数据
      this.updateTagsSimpleList({
        subjectID: data
      })
      // 给二级菜单清空
      this.form.secondLevel = [],
      // 给搜索页标签选项清空
      this.form.threeLable = []
      subjectId = data

    },
    // 二级目录获取
    secondchange(){
        // 学科二级目录（新添加
      this.updateSecondLevelList({
        subjectID: subjectId
      })

    },
    // 搜索页标签数据获取
    lablechange(){
        // 获取搜索页标签选项数据
      this.updateTagsSimpleList({
        subjectID: subjectId
      })
    },
    // 点击查看，题目预览
    async lookover(row){
      console.log(row.id);
     await this.updateLookOverList({
        id: row.id
      })
      // 返显
      // this.checkList = this.LookOverList.options.isRight  //todo

      // 点击打开预览
      this.preview = true

    },
    // 点击题目预览里面的关闭按钮
    previewClose(){
      this.preview = false
    },
    // 视频栏
    videovision(){
      // todo
    },
      // 删除基础题库
    deleteBT(row){
      this.deleteBasicTest = true
      deleteBasicId = row.id
    },
    // 删除基础题库取消键
    deleteBasicTestClose(){
      this.deleteBasicTest = false
    },
      // 删除基础题库确定键
    deleteBasicTestOk(){
      testmanagementApi.deletebasicTest({
        id: deleteBasicId
      }),
      this.deleteBasicTest = false
      // 删除后更新题库
      this.updateChoiceList({
        page: this.page,
        pagesize: this.pagesize,
      })
      .then(msg => this.$message.success('删除成功'))
      .catch(msg => this.$message.error('删除失败'))
    },

    // 跳转编辑页
    changeBT(row){
      console.log(row.id);
      // 跳路由
      // this.$router.push('new/:id') //todo/
      // 这里是获取id信息并跳转编辑页 todo
        this.$router.push({
        name: 'questions-new',  //todo
        // 使用params时必须用name
        params: {
          id:row.id,
        }
      })

    },
    // 这是标签选择页面的默认配置
    handleClick(tab, event) {
      // console.log(tab, event);
      // 精选题库列表显示初始化
      if(tab.index=='1'){
        this.updateChoiceList({
          page: this.page,
          pagesize: this.pagesize,
          chkState: 0
        })
      }else if (tab.index=='2'){
          this.updateChoiceList({
          page: this.page,
          pagesize: this.pagesize,
          chkState: 1
        })
      }else if (tab.index=='3'){
          this.updateChoiceList({
          page: this.page,
          pagesize: this.pagesize,
          chkState: 2
        })
      }else if (tab.index=='0'){
        this.updateChoiceList({
          page: this.page,
          pagesize: this.pagesize,

        })
      }


    },
    // 上下架按钮弹窗
    putSoldBT(row){
      this.putSoldTest = true
      putSoldID = row.id
    },
       // 取消上下架按钮弹窗
    putSoldTestClose(){
      this.putSoldTest = false
    },
     // 确定上下架按钮弹窗
    putSoldTestOk(){
      testmanagementApi.putSold({
        id: putSoldID,
        publishState: 1
      })
      this.putSoldTest = false
    },
    // 点击审核按钮弹窗
    checkBT(row){
      this.checkTest = true
      checkId = row.id
    },
    // 点击审核按钮弹窗取消键
    checkTestClose(){
      this.checkTest = false
    },
     // 点击审核按钮弹窗确定键
    checkTestOk(){
      this.checkTest = false
      // 返回通过/不通过数据
      testmanagementApi.checkTest({
        id: checkId,
        // 通过/不通过
        chkState: +this.radiobox,
        // 原因(字符串)
        chkRemarks: this.textarea,
      })
    },
    // 选择(待审核)跳转待审核界面列表数据
    // secondclick(){
    //   // 精选题库列表显示初始化
    // this.updateChoiceList({
    //   page:this.page,
    //   pagesize: this.pagesize,
    //   chkState: 0
    // })

    // }

  },
  created(){
    // this.updatebasicsTestList({
    //   page:this.page,
    //   pagesize: this.pagesize,
    // });
    // 更新学科下拉菜单
    this.updateSubjectsSimpleList();
    // 用户简单列表（目前是用在录入人列表）
    this.updateUsersSimpleList();
    // 精选题库列表显示初始化
    this.updateChoiceList({
      page:this.page,
      pagesize: this.pagesize,
    })

  }
}
</script>

<style lang="scss" scoped>
  .box-card {
    margin: 8px;
  }
  .locationstyle {
    display: flex;
    justify-content: space-between;
  }
  .previewtitle {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid gray;

    .previewtitlebar {
      margin: 10px;
    }
  }
  .laststyltetitle {
     display: flex;
     flex-direction: column;

  }
  .laststylte {
    border-bottom: 1px solid gray;
  }
  .checkboxstyle {
    flex: 1;
    display: block;
    padding: 8px;

  }
  .textareastyle {
    margin-top: 16px;

  }

</style>
